<%@ page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false" pageEncoding="UTF-8"%>
<%@ page import="com.augmentum.oes.model.User" %>
<%@ page import="com.augmentum.oes.Constants" %>
<%@ page import="com.augmentum.oes.util.PropertyUtil" %>
<%@ page import="com.augmentum.oes.util.PathUtil" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<!DOCTYPE html>

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>User Detail</title>
    <link rel="stylesheet" href="<%=PropertyUtil.getStaticPath() %>/static/css/main.css" type="text/css" />
    <link rel="stylesheet" href="<%=PropertyUtil.getStaticPath() %>/static/css/user.css" type="text/css" />
    <script src="<%=PropertyUtil.getStaticPath() %>/static/js/jquery-1.10.2.min.js"></script>
    <script src="<%=PropertyUtil.getStaticPath() %>/static/js/dialog.js"></script>
    <script src="<%=PropertyUtil.getStaticPath() %>/static/js/question.js"></script>
    <script src="<%=PropertyUtil.getStaticPath() %>/static/js/user.js"></script>
  </head>
  <body>
    <div class="header">
    <div class="logo-icon">
    </div>
    <div class="head-title">
        Online Exam System
    </div>
    <div class="user-logout">
        <div class="language">
            中文
        </div>
        <div class="person-info-outdiv">
            <div class="head-person-info float-left" >
                <div class="head-person-info">
                    <img src="<%=PropertyUtil.getStaticPath() %>/static/images/ICN_Web_PersonalInformation_CurrentPage_20x20.png" class="person-info-currentpage" />
                </div>
                <span class="name-color"> ${USER.userName} </span>
            </div>
            <div class="logout" onclick="javascript:window.location.href='../static/logout.jsp'">
                Logout
            </div>
        </div>
    </div>
    </div>
    <div class="tab-panel"> 
    <div class="question-manage background-white" onclick="toQuestionList();">
        Question Management
    </div>
    <div class="exam-manage"  onClick="toExamList();">
        Exam Management
    </div>
    </div>
    <div class="content-panel content-panel-no-breadcrumb">
    <div class="list-panel">
    <div class="detail-info">
        <div onclick="showUploadDialog();" class="cursor"><img src="<%=PropertyUtil.getStaticPath() %>/avera_image/${user.photoPath}" width="130px" height="140px" /></div>
        <div class="person-name-id">
            ${USER.userName}
            <br/>
            YT00${user.id}
        </div>
    </div>
        <div class="menu-list-outdiv">
            <ul class="menu-list">
                <li onclick="toUserDetail();" onmouseout="this.className='list-out'" onmouseover="this.className='list-over'">Basic Information</li>
                <li class="list-over">Change Password</li>
            </ul>
        </div>
    </div>
    <div class="list-content-panel">
  <div class="basic-info">Change Password
</div>
<div class="line">
  <hr>
</div>
<c:if test="${!empty SUCCESS_MSG}">
    <script>
       $(function(){modalDialogShow('${SUCCESS_MSG}')});
    </script>
</c:if>
<% session.removeAttribute("SUCCESS_MSG"); %>
      <div class="change-password-content-div">
        <table class="user-detail-table">
          <tbody>
            <tr>
              <td class="first-td">
                UserName:
              </td>
              <td class="second-td">
                ${USER.userName}
              </td>
            </tr>
            <form action="<%=PathUtil.getFullPath("changepassword.action")%>" method="POST" id="changePasswordForm" >
            <tr>
              <td class="first-td">
                New Password:
              </td>
              <td class="second-td">
                <input type="password" id="password" name="password" class="change-password-input" maxlength="20"/>
              </td>
              <td>
                <div class="error" id="pwdError"></div>
              </td>
            </tr>
            <tr>
              <td class="first-td">
                Confirm Password:
              </td>
              <td class="second-td">
                <input type="password" id="confirmPassword" class="change-password-input" maxlength="20"/>
              </td>
              <td>
                <div class="error" id="confirmPwdError"></div>
              </td>
            </tr>
            </form>
            <tr>
              <td colspan="3" align="center">
              <div onclick="toUserDetail();" class="big-div-button btn-left" onmouseout="this.className='big-div-button btn-left'" onmouseover="this.className='big-button-over btn-left'" style="float:left;">Cancel</div>
              <div onclick="submitChangePwdForm();"  class="big-div-button btn-left" onmouseout="this.className='big-div-button btn-left'" onmouseover="this.className='big-button-over btn-left'">Submit</div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    </div>
    <div class="footer">
    <p> Copyright © 2014 Augmentum, Inc.All Rights Reserved.</p>
    </div>
    <div class="modal-dialog" id="modalDialog">
      <div onclick="modalDialogHidden();" title="Close Dialog" class="modal-dialog-closebutton">
      </div>
      <div class="modal-dialog-msg" id="msgContent">
      </div>
      <div class="modal-dialog-btn-outdiv">
        <div class="modal-btn modal-dialog-btn-yes single-button" onclick="modalDialogHidden();">OK</div>
      </div>
    </div>
    <div class="upload" id="upload" style="background-color:#D2DAE3;">
        <div onclick="uploadDialogHidden();" title="Close Dialog" class="modal-dialog-closebutton"></div>
        <%@ include file="../upload.jsp" %>
    </div>
    <div class="modal-div" id="modalDiv"></div>
  </body>
</html>